<template>
  <div class="find_designer">
    <div class="find_designer_title">
      <div @click="changeFindName(item.type)" :class="{active_title:getFindTitle === item.type}"
           v-for="(item,index) in selectFindTitle">{{item.title}}
      </div>
    </div>
    <div>
      <find-renovation></find-renovation>
    </div>
  </div>
</template>

<script>
  import FindRenovation from './FindRenovation';

  export default {
    name: 'FindDesigner',
    components: {FindRenovation},
    data() {
      return {
        selectFindTitle: [
          {title: '我要装修', type: 1},
          {title: '我要买房', type: 2},
          {title: '我要租房', type: 3}
        ]
      }
    },
    computed: {
      getFindTitle() {
        return this.$store.getters.getFindTitle;
      }
    },
    methods: {
      changeFindName(type) {
        this.$store.commit('setFindTitle', type);
      },
      handelTouchMove(e) {
        e.preventDefault();
      }
    }
  }
</script>

<style scoped>
  .find_designer .find_designer_title {

    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  .find_designer .find_designer_title>div{
    width: 30%;
    text-align: center;
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 5px;
    margin-right: 10px;
    font-size: 0.99rem;
  }
</style>
